<!--
 * @Author: licongwei
 * @Date: 2022-03-16 15:08:41
 * @Description: 门店数量情况
-->
<template>
  <com-box :title="title">
    <template v-slot>
      <div class="box">
        <div
          :class="['label', { active: shopId === labelData.shopId }]"
          @click="handleClick(labelData.shopId)"
        >
          <p class="name">{{ labelData.name }}</p>
          <number-scroll
            :number="labelData.value"
            :color="shopId === labelData.shopId ? '#fff' : '#cefffc'"
            :fontSize="22"
          ></number-scroll>
          <p class="unit">{{ labelData.unit }}</p>
        </div>
        <el-scrollbar
          height="150px"
          ref="scrollbar"
          @scroll="handleScroll"
          @mouseover="stopScroll"
          @mouseout="startScroll"
        >
          <ul class="list">
            <li
              :class="['item', { active: shopId === item.shopId }]"
              v-for="item in data"
              :key="item.shopId"
              @click="handleClick(item.shopId)"
            >
              <img :src="item.image" alt="" />
              <p class="name">{{ item.name }}</p>
              <number-scroll
                :number="item.value"
                :color="shopId === item.shopId ? '#fff' : '#01fff0'"
                :fontSize="22"
              ></number-scroll>
              <span class="unit">{{ item.unit }}</span>
            </li>
          </ul>
        </el-scrollbar>
      </div>
    </template>
  </com-box>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
import httpRequest from '@/service'
import comBox from '@/components/comBox/comBox.vue'
import numberScroll from '@/components/numberScroll/numberScroll.vue'
interface IDataItem {
  name: string
  unit: string
  shopId: string
  img: string
  value: number
}
interface ILabelItem {
  name: string
  unit: string
  shopId: string
  value: number
}
interface IState {
  title: string
  shopId: string
  labelData: ILabelItem
  data: IDataItem[]
  timerFlag?: boolean
  timer?: any
  getData: () => void
  handleClick: (id: string) => void
}
export default defineComponent({
  name: 'mdslqk',
  components: {
    comBox,
    numberScroll
  },
  emit: ['change'],
  setup(props, { emit }) {
    let curScrollTop = 0
    const scrollbar = ref()
    const state: IState = reactive({
      timerFlag: true,
      timer: null,
      title: '',
      shopId: '',
      labelData: {
        name: '所有超市',
        value: 0,
        shopId: 'all',
        unit: '家'
      },
      data: [],
      getData: () => {
        httpRequest
          .get({ url: 'M3P1Mdslqk' })
          .then((res) => {
            state.title = res.title
            let total = 0
            state.data = res.data.map((item: any) => {
              total += item.value
              return {
                ...item,
                image: item.img.slice(item.img.indexOf('/images'))
              }
            })
            state.labelData.value = total
            state.shopId = state.labelData.shopId
            emit('change', state.shopId)
          })
          .catch(() => {
            console.log('请求失败')
          })
      },
      handleClick: (shopId) => {
        if (state.shopId === shopId) return
        state.shopId = shopId
        emit('change', state.shopId)
      }
    })
    state.getData()

    // 滚动

    onMounted(() => {
      onScroll()
    })
    const onScroll = () => {
      state.timer = setInterval(() => {
        if (state.timerFlag) {
          curScrollTop++
          scrollbar.value?.setScrollTop(curScrollTop)
        }
        if (curScrollTop - scrollbar.value?.wrap$.scrollTop > 1) {
          curScrollTop = 0
        }
      }, 50)
    }

    // 滚动时触发
    const handleScroll = (pos: any) => {
      curScrollTop = pos.scrollTop
    }
    const stopScroll = () => {
      state.timerFlag = false
    }
    const startScroll = () => {
      state.timerFlag = true
      curScrollTop = scrollbar.value.wrap$.scrollTop
    }

    return {
      ...toRefs(state),
      handleScroll,
      startScroll,
      stopScroll,
      scrollbar
    }
  }
})
</script>
<style lang="less" scoped>
.box {
  padding: 15px 20px;
  .label {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cefffc;
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 34px;
    background-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(61, 153, 221, 0.3) 50%,
      transparent 100%
    );
    cursor: pointer;
    .name {
      font-weight: 700;
      margin-right: 30px;
    }
    .unit {
      font-size: 22px;
      font-family: 'AliHYAiHei';
    }
    &.active {
      background-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(144, 208, 255, 0.6) 50%,
        transparent 100%
      );
      color: #fff;
    }
  }
  ul.list {
    height: 100%;
    li.item {
      color: #b3f2ff;
      display: flex;
      align-items: center;
      margin: 5px 0;
      padding: 0 20px;
      background-color: rgba(61, 153, 221, 0.3);
      border: 1px solid rgba(61, 153, 221, 0.8);
      border-radius: 20px;
      line-height: 40px;
      color: #01fff0;
      cursor: pointer;
      transition: all 0.2s;
      img {
        margin: 0 30px;
      }
      .name {
        font-size: 18px;
        margin-right: auto;
        font-weight: 700;
      }
      .unit {
        font-size: 22px;
        font-family: 'AliHYAiHei';
        margin-left: 10px;
      }
      &.active {
        background-color: rgba(144, 208, 255, 0.3);
        border: 1px solid rgba(144, 208, 255, 0.8);
        .name {
          color: #fff;
        }
        .unit {
          color: #fff;
        }
      }
    }
  }
}
</style>
